import React, { PureComponent } from 'react';
import {
   Input, Table,Row,Col,Card
} from 'antd';

const Search = Input.Search;
export default class ContentList extends PureComponent {
  state = {
    loadMethod:()=>{},
    addSpread:(recode,index)=>{},
  };

  handleTableChange = (page, pageSize) => {
    this.props.ContentListChange(page, pageSize);
  }

  addContent = (record,index) => {
    this.props.addContent(record,index);
  }

  handleSearch = (value) => {
    this.props.contentHandleSearch(value);
  }

render() {
    let {spreadListData,total ,contentPageNo ,contentPageSize} = this.props;

    const columns = [{
      title: '优惠券标题',
      dataIndex: 'rpcTitle',
      render: (text, record) => (
        <span>
            <a href="javascript:void(0)" onClick={() => this.showAllCouponInfo(record.id)} >{text}</a>
          </span>
      )
    }, {
      title: '商家名称',
      dataIndex: 'rpcName',
      key: 'rpcName',
    }, {
      title: '卡券使用期',
      dataIndex: 'rpcStarttime',
      key: 'rpcStarttime',
      render: (text, record) => (
        <span>
            {record.rpcStarttime} 至 {record.rpcEndtime}
          </span>
      )
    }, {
      title: '已领取',
      dataIndex: 'getCount',
      key: 'getCount',
    }, {
      title: '总量',
      dataIndex: 'rpcMaxCount',
      key: 'rpcMaxCount',
    },{
      title: '操作',
      dataIndex: 'id',
      key: 'id',
      render: (text, record,index) => {
        return <span>
          <a href="javascript:void(0)" onClick={() => this.addContent(record,index)}>添加</a>
        </span>
      },
    }
  ]

  const extraCard = (
      <div>
        <Search
          placeholder="请输入优惠券标题、商家名称"
          onSearch={(value) => this.handleSearch(value)}
          style={{ width: 200 }}
          enterButton
        />
      </div>
    )

    const paginationProps = {
      showSizeChanger: true,
      pageSize:contentPageSize,
      total:total,
      current:contentPageNo,
      onChange:this.handleTableChange
    };

    return (
      <Card  extra={extraCard}>
        <Row gutter={16}>
        <Col className="gutter-row" span={24}>
          <Table dataSource={spreadListData} columns={columns} style={{ width: '100%' }}
            pagination={paginationProps}  />
        </Col>
        </Row>
    </Card>
    );
  }
}
